@import '../../../styles/variables.scss';

.wrap {
  display: flex;
  justify-content: center;
  height: .5rem;
  padding: 5px .12rem;
  box-sizing: border-box;
  line-height: 1;
  background-color: #fff;

  &>div {
    position: relative;
    &:not(:last-child) {
      border-right: 1px solid $color-border;
    }
  }
}

.timeWrap,
.nums,
.assist {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeWrap {
  width: .74rem;
  text-align: center;
  white-space: nowrap;

  span {
    display: inline-block;
  }
}

.time {
  font-size: $font-size-time;
  color: #000;
  margin-top: 8px;

  span {
    // width: 40px;
    // height: 30px;
    padding: 1px;
    line-height: 1;
    color: $color-font;
    background-color: $background-time;

    &:first-child {
      margin-right: 0.03rem;
    }

    &:last-child {
      margin-left: 0.03rem;
    }
  }
}
.nums {
  width: 2.51rem;
  padding: 0 2px;
}

.flag {
  height: 10px;
  margin-left: 3px;
  color: $color-font;
  font-size: 8px;
  line-height: 10px;
  vertical-align: middle;
}

.numsList {
  display: flex;
  text-align: center;
  li {
    width: 18px;
    height: 18px;
    margin: 5px .08rem 5px 0;
    color: $color-font-2;
    line-height: 18px;
    background-color: $color-bg-ball2;
    border-radius: 50%;

    &:nth-child(-n+3) {
      color: $color-font-1;
      background-color: $color-bg-ball1;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}
.btn {
  line-height: 1;
}
.assist {
  width: .5rem;
  text-align: center;
  white-space: nowrap;
}

.icon_assist {
  font-size: 20px;
  color: #ff5252;
}
.title {
  font-size: $size-font-middle;
  color: $color-font-title;
}
